<template>
  <div class="commencementAndTechnicalDisclosure">
    <span class="title">施工单位信息</span>
    <div class="deputyTitle">
      <span style="color:#A1A1A1;">施工单位：</span>
      {{companyName}}
    </div>
    <div class="filter-container">
      <el-form
        :inline="true"
        label-position="right"
        label-width="100px"
        :model="formData"
        ref="formData"
        :rules="formDataRules"
      >
        <div>
          <el-form-item label="项目负责人" prop="projectLeaderId">
            <el-select :disabled="disabled" v-model="formData.projectLeaderId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="技术负责人" prop="technicalLeaderId">
            <el-select :disabled="disabled" v-model="formData.technicalLeaderId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_1"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="技术交底时间" prop="technicalDisclosureTime">
            <el-date-picker
              :disabled="disabled"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="formData.technicalDisclosureTime"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="施工员" style="margin-right:5%;" prop="builderId">
            <el-select :disabled="disabled" v-model="formData.builderId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_2"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="安全员" prop="safetyOfficerId">
            <el-select :disabled="disabled" v-model="formData.safetyOfficerId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_3"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="材料员" prop="materialmanId">
            <el-select :disabled="disabled" v-model="formData.materialmanId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_4"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预算员" prop="budgeterId">
            <el-select :disabled="disabled" v-model="formData.budgeterId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_5"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="质检员" prop="qualityInspectorId">
            <el-select :disabled="disabled" v-model="formData.qualityInspectorId" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.index_6"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="参加人员" prop="participants">
            <el-input
              :disabled="disabled"
              v-model="formData.participants"
              placeholder="参加人员"
              style="width:279%;"
            />
          </el-form-item>
        </div>
        <div>
          <span class="title">监理单位信息</span>
          <div class="deputyTitle">
            <span style="color:#A1A1A1;">监理单位：</span>
            {{companyName_1}}
          </div>
          <el-form-item label="总监" label-width="60px" prop="director">
            <el-select :disabled="disabled" v-model="formData.director" placeholder="请选择">
              <el-option
                v-for="item in userList_1"
                :key="item.index_7"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="现场监理员" prop="fieldSupervisor">
            <el-select :disabled="disabled" v-model="formData.fieldSupervisor" placeholder="请选择">
              <el-option
                v-for="item in userList_1"
                :key="item.index_8"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <div style="padding:30px 0;">附件资料</div>
          <div>
            <div>
              <el-form-item label="技术交底会纪要" label-width="180px" prop="technicalSummaryFileId">
                <el-upload
                  v-if="!disabled"
                  class="upload-demo"
                  :action="$config.uploadUrl"
                  accept=".pdf"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadSummary"
                  :file-list="fileList[0]"
                  :disabled="disabled"
                >
                  <el-button v-if="!disabled" size="small">上传</el-button>
                  <!-- <el-button @click="seePdf(0)" v-if="disabled" size="small">查看</el-button> -->
                </el-upload>
                <seeFujianForList
                  v-if="disabled && fileList[0]"
                  @openPdf="seePdf"
                  :file-obj="fileList[0]"
                  :file-num="0"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item label="监理批准的施工组织设计" label-width="180px" prop="designFileId">
                <el-upload
                  v-if="!disabled"
                  class="upload-demo"
                  :action="$config.uploadUrl"
                  accept=".pdf"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadDesign"
                  :file-list="fileList[1]"
                  :disabled="disabled"
                >
                  <el-button v-if="!disabled" size="small">上传</el-button>
                  <!-- <el-button @click="seePdf(1)" v-if="disabled" size="small">查看</el-button> -->
                </el-upload>
                <seeFujianForList
                  v-if="disabled && fileList[1]"
                  @openPdf="seePdf"
                  :file-obj="fileList[1]"
                  :file-num="1"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item
                label="第一次工地例会会议纪要"
                label-width="180px"
                prop="firstSiteMeetingSummaryFileId"
              >
                <el-upload
                  v-if="!disabled"
                  class="upload-demo"
                  :action="$config.uploadUrl"
                  accept=".pdf"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadMeeting"
                  :file-list="fileList[2]"
                  :disabled="disabled"
                >
                  <el-button v-if="!disabled" size="small">上传</el-button>
                  <!-- <el-button @click="seePdf(2)" v-if="disabled" size="small">查看</el-button> -->
                </el-upload>
                <seeFujianForList
                  v-if="disabled && fileList[2]"
                  @openPdf="seePdf"
                  :file-obj="fileList[2]"
                  :file-num="2"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item label="开工令" label-width="180px" prop="startTokenFileId">
                <el-upload
                  v-if="!disabled"
                  class="upload-demo"
                  :action="$config.uploadUrl"
                  accept=".pdf"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadStart"
                  :file-list="fileList[3]"
                  :disabled="disabled"
                >
                  <el-button v-if="!disabled" size="small">上传</el-button>
                  <!-- <el-button @click="seePdf(3)" v-if="disabled" size="small">查看</el-button> -->
                </el-upload>
                <seeFujianForList
                  v-if="disabled && fileList[3]"
                  @openPdf="seePdf"
                  :file-obj="fileList[3]"
                  :file-num="3"
                />
              </el-form-item>
            </div>
            <div>
              <el-form-item label="第一变更会审意见" label-width="180px" prop="firstChangeOpinionsFileId">
                <el-upload
                  v-if="!disabled"
                  class="upload-demo"
                  :action="$config.uploadUrl"
                  :limit="1"
                  :before-upload="uploadBefore"
                  :on-success="uploadJointHearing"
                  :file-list="fileList[4]"
                  :disabled="disabled"
                  accept=".pdf"
                >
                  <el-button v-if="!disabled" size="small">上传</el-button>
                  <!-- <el-button @click="seePdf(4)" v-if="disabled" size="small">查看</el-button> -->
                </el-upload>
                <seeFujianForList
                  v-if="disabled && fileList[4]"
                  @openPdf="seePdf"
                  :file-obj="fileList[4]"
                  :file-num="4"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      <div class="btn">
        <el-button :disabled="disabled" class="filter-item" type="primary" @click="onSubmit">确定</el-button>
        <el-button class="filter-item">取消</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInformation,
  getEnterpriseDetail,
  submitEnterpriseDetail
} from "@/api/project1/projectOrganization/commencementAndTechnicalDisclosure";
import {
  validateNotNull,
  validateUpload,
  validateDatetime
} from "@/utils/validate.js";
import seeFujianForList from "@/components/seeFujianForList";
export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      companyName: null, //施工单位公司名称
      companyName_1: null, //监理单位公司名称
      userList: [], //施工单位列表
      userList_1: [], //监理单位列表
      fileList: [], //图片上传列表
      formData: {
        //提交数据
        projectId: localStorage.getItem("projectId"),
        projectLeaderId: null, //项目负责人
        technicalLeaderId: null, //技术负责人
        builderId: null, //施工员
        safetyOfficerId: null, //安全员
        materialmanId: null, //材料员
        budgeterId: null, // 预算员
        qualityInspectorId: null, //质检员
        technicalDisclosureTime: null, // 技术交底时间
        participants: null, //参加人员
        director: null, //总监
        fieldSupervisor: null, //现场监理员
        technicalSummaryFileId: null, //技术交底会纪要文件ID
        designFileId: null, //监理批准的施工组织设计文件ID
        firstSiteMeetingSummaryFileId: null, //第一次工地例会会议纪要ID
        startTokenFileId: null, //开工令文件ID
        firstChangeOpinionsFileId: null //第一变更会审意见文件ID
      },
      formDataRules: {
        projectLeaderId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        technicalLeaderId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        builderId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        safetyOfficerId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        materialmanId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        budgeterId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        qualityInspectorId: [{ validator: validateNotNull, trigger: "change" }], //项目负责人
        technicalDisclosureTime: [
          { validator: validateDatetime, trigger: "change" }
        ],
        participants: [{ validator: validateNotNull, trigger: "blur" }],
        director: [{ validator: validateNotNull, trigger: "change" }],
        fieldSupervisor: [{ validator: validateNotNull, trigger: "change" }],
        technicalSummaryFileId: [{ validator: validateUpload }],
        designFileId: [{ validator: validateUpload }],
        firstSiteMeetingSummaryFileId: [{ validator: validateUpload }],
        startTokenFileId: [{ validator: validateUpload }],
        firstChangeOpinionsFileId: [{ validator: validateUpload }]
      },
      projectId: localStorage.getItem("projectId") || "",
      disabled: true,
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },
  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    //执行
    this.getDetail();
  },
  methods: {
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    //获取数据
    getDetail() {
      //回显获取数据
      getInformation({ projectId: this.projectId }).then(res => {
        if (res.data) {
          if (res.data.implmentationEnterprisePickInfo) {
            this.companyName =
              res.data.implmentationEnterprisePickInfo.companyInfo.name; //施工单位名称
          }
          if (res.data.supervisionEnterprisePickInfo) {
            this.companyName_1 =
              res.data.supervisionEnterprisePickInfo.companyInfo.name; //监理单位名称
          }
          const companyId = res.data.implmentationEnterprisePickInfo.companyId; //施工单位id
          const companyId_1 = res.data.supervisionEnterprisePickInfo.companyId; //施工单位id

          this.formData = res.data;

          if (this.formData.technicalSummaryFileInfo) {
            this.fileList.push([
              {
                name: this.formData.technicalSummaryFileInfo.fileName,
                url: this.formData.technicalSummaryFileInfo.filePath
              }
            ]);
          }
          if (this.formData.designFileInfo) {
            this.fileList.push([
              {
                name: this.formData.designFileInfo.fileName,
                url: this.formData.designFileInfo.filePath
              }
            ]);
          }
          if (this.formData.firstSiteMeetingSummaryFileInfo) {
            this.fileList.push([
              {
                name: this.formData.firstSiteMeetingSummaryFileInfo.fileName,
                url: this.formData.firstSiteMeetingSummaryFileInfo.filePath
              }
            ]);
          }
          if (this.formData.startTokenFileInfo) {
            this.fileList.push([
              {
                name: this.formData.startTokenFileInfo.fileName,
                url: this.formData.startTokenFileInfo.filePath
              }
            ]);
          }
          if (this.formData.firstChangeOpinionsFileInfo) {
            this.fileList.push([
              {
                name: this.formData.firstChangeOpinionsFileInfo.fileName,
                url: this.formData.firstChangeOpinionsFileInfo.filePath
              }
            ]);
          }
          // this.fileList.push(
          //   [{name: this.formData.technicalSummaryFileInfo.fileName,url: this.formData.technicalSummaryFileInfo.filePath}],
          //   [{name: this.formData.designFileInfo.fileName,url: this.formData.designFileInfo.filePath}],
          //   [{name: this.formData.firstSiteMeetingSummaryFileInfo.fileName,url: this.formData.firstSiteMeetingSummaryFileInfo.filePath}],
          //   [{name: this.formData.startTokenFileInfo.fileName,url: this.formData.startTokenFileInfo.filePath}],
          //   [{name: this.formData.firstChangeOpinionsFileInfo.fileName,url: this.formData.firstChangeOpinionsFileInfo.filePath}]
          // );
          //查询当前人物
          getEnterpriseDetail({
            enterpriseid: companyId
          }).then(res => {
            this.userList = res.data; //施工单位列表
            console.log(
              this.userList,
              "this.userListthis.userListthis.userListthis.userList"
            );
          });
          //查询当前人物
          getEnterpriseDetail({
            enterpriseid: companyId_1
          }).then(res => {
            this.userList_1 = res.data; //监理单位列表
          });
        }
      });
    },
    //文件提交前
    uploadBefore: function(file) {
      var isTpye = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (isTpye != "pdf") {
        this.$message({
          showClose: true,
          message: "上传文件只能是pdf格式!",
          type: "error"
        });
        return false;
      }
    },
    //技术交底会纪要上传
    uploadSummary(res) {
      if (res.code == 1000) {
        this.formData.technicalSummaryFileId = res.data.id;
      }
    },
    //监理批准的施工组织设计文件上传
    uploadDesign(res) {
      if (res.code == 1000) {
        this.formData.designFileId = res.data.id;
      }
    },
    //第一次工地例会会议纪要上传
    uploadMeeting(res) {
      if (res.code == 1000) {
        this.formData.firstSiteMeetingSummaryFileId = res.data.id;
      }
    },
    //开工令文件上传
    uploadStart(res) {
      if (res.code == 1000) {
        this.formData.startTokenFileId = res.data.id;
      }
    },
    //第一变更会审意见文件上传
    uploadJointHearing(res) {
      if (res.code == 1000) {
        this.formData.firstChangeOpinionsFileId = res.data.id;
      }
    },
    //提交
    onSubmit: function() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          this.formData["projectId"] = this.projectId;
          submitEnterpriseDetail(this.formData)
            .then(res => {
              loading.close();
              this.$message({
                message: "提交成功",
                type: "success"
              });
              this.$router.push(
                "/projectManagement/projectImplementation/dealwith"
              );
            })
            .catch(res => {
              loading.close();
            });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 18px;
}
.deputyTitle {
  padding: 30px 0;
  font-size: 14px;
}
/deep/ .el-date-editor.el-input {
  width: 200px;
}
/deep/ .el-form--inline .el-form-item__label {
  color: #a1a1a1;
}

.commencementAndTechnicalDisclosure {
  padding: 20px 20px 0 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
}
.btn {
  margin-top: 30px;
}
</style> 
